<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			padding: 0;
			margin: 0;
			height: 100vh;
			background: #222;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.box {
			display: flex;
			margin: 50px auto;
			width: 600px;
			overflow: hidden;
			border-radius: 8px;
			padding: 15px;
			box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
		}

		.text {
			font-size: 17px;
			letter-spacing: 2px;
			color: #fff;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: justify;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			position: relative;
		}

		.text::before {
			content: "";
			height: calc(100% - 24px);
			float: right;
		}

		.text::after {
			content: "";
			width: 999vw;
			height: 999vw;
			position: absolute;
			box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
			margin-left: -100px;
		}

		.btn {
			float: right;
			clear: both;
			margin-left: 10px;
			font-size: 16px;
			padding: 0 8px;
			background: #3f51b5;
			line-height: 24px;
			border-radius: 4px;
			color: #fff;
			cursor: pointer;
		}

		.btn::before {
			content: "展开";
		}

		.checkbox {
			display: none;
		}

		.checkbox:checked+.text {
			-webkit-line-clamp: 999;
		}

		.checkbox:checked+.text::after {
			visibility: hidden;
		}

		.checkbox:checked+.text .btn::before {
			content: "收起";
		}
	</style>
	<body>
		<div class="box">
			<input id="labelText" class="checkbox" type="checkbox">
			<div class="text">
				<label class="btn" for="labelText"></label>
				汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
				这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
				为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
				每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
				至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！
			</div>
		</div>
	</body>
</html>
